<html>
	<head>
		<title>m-Event</title>
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css" />
		<link rel="stylesheet" href="jquery.ui.datepicker.mobile.css" /> 
		<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js"></script>
		<script src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
		<script src="jQuery.ui.datepicker.js"></script>
		<script src="jquery.ui.datepicker.mobile.js"></script>
	</head>
	<body>
<script type="text/javascript">
function resetTextFields()
        {
            $("#eventCategory").val("");
			$("#eventDes").val("");
            $("#eventName").val("");
			$("#eventLoc").val("");
			$("#eventPlace").val("");
			$("#date").val("");
        }
 
        function onSuccess(data, status)
        {
            resetTextFields();
            // Notify the user the new post was saved
            $("#notification").fadeIn(2000);
            data = $.trim(data);
            if(data == "OK")
            {
                $("#notification").css("background-color", "#ffff00");
                $("#notification").text("Login Success");
				
            }
            else
            {
                $("#notification").css("background-color", "#ff0000");
                $("#notification").text("Registration Failed");
            }
            $("#notification").fadeOut(10000);
			//$.mobile.changePage($("#indexPage"));
        }

 $(document).ready(function() {
			$("#submit").click(function(){
			$("#inputEvent").validate();
			if($("#inputEvent").valid()){
                var formData = $("#inputEvent").serialize();
 
                $.ajax({
                    type: "POST",
                    url: "/app/mobile-event-portal/db/insertEvent.php",
                    cache: false,
                    data: formData,
                    success: onSuccess,
                });
			}
 
                return false;
            });
 
            $("#cancel").click(function(){
                resetTextFields();
            });
 
            $("#refresh").click(function(){
                location.reload();
            });
			
        });
 
</script>
<div data-role="page" id="indexPage" data-theme="b">
		
		<div data-role="header" data-position="fixed">
			<h1>Home</h1>
			<a href="index.html" class="ui-btn-left">Home</a>
			<a href="login.html" class="ui-btn-right">Logout</a>
				<div data-role="navbar">
					<ul>
						<li><a href="member_page.html">My Events</a></li>
						<li><a href="#">Create Event</a></li>
					</ul>
				</div>
		</div>
		
		<div data-role="content">
			<div data-role="content">
			<form id="inputEvent">
				<div data-role="fieldcontain">
					<label for="eventCategory" class="select">Event Category</label>
					<select name="eventCategory" data-native-menu="false" id="eventCategory" value="" class="required">
						<option value="musik">Musik</option>
						<option value="seminar">Seminar</option>
						<option value="pameran">Pameran</option>
						<option value="kompetisi">Kompetisi</option>
					</select>
					<label for="eventName">Event Name</label>
					<input type="text" name="eventName" id="eventName" value="" class="required"/>
					<label for="eventDes">Event Description:</label>
					<textarea cols="40" rows="8" name="eventDes" id="eventDes"></textarea>
					<label for="eventLoc">Event Location</label>
					<select name="eventLoc" data-native-menu="false" id="eventLoc" value="" class="required">
						<option value="aceh">Banda Aceh</option>
						<option value="medan">Medan</option>
						<option value="Padang">Padang</option>
						<option value="Pekanbaru">Pekanbaru</option>
						<option value="Jambi">Jambi</option>
						<option value="Palembang">Palembang</option>
						<option value="Bengkulu">Bengkulu</option>
						<option value="BandarLampung">Bandar Lampung</option>
						<option value="PangkalPinang">Pangkal Pinang</option>
						<option value="TanjungPinang">Tanjung Pinang</option>
						<option value="JakartaPusat">Jakarta Pusat</option>
						<option value="JakartaSelatan">Jakarta Selatan</option>
						<option value="JakartaTimur">Jakarta Timur</option>
						<option value="JakartaBarat">Jakarta Barat</option>
						<option value="Bandung">Bandung</option>
						<option value="Semarang">Semarang</option>
						<option value="Surabaya">Surabaya</option>
						<option value="Serang">Serang</option>
						<option value="Denpasar">Denpasar</option>
						<option value="Kupang">Kupang</option>
						<option value="Mataram">Mataram</option>
						<option value="Pontianak">Pontianak</option>
						<option value="PalangkaRaya">Palangka Raya</option>
						<option value="Banjarmasin">Banjarmasin</option>
						<option value="Samarinda">Samarinda</option>
						<option value="TanjungSelor">Tanjung Selor</option>
						<option value="Menado">Menado</option>
						<option value="Palu">Palu</option>
						<option value="Makasar">Makasar</option>
						<option value="Kendari">Kendari</option>
						<option value="Mamuju">Mamuju</option>
						<option value="Gorontalo">Gorontalo</option>
						<option value="Ambon">Ambon</option>
						<option value="Sofifi">Sofifi</option>
						<option value="Jayapura">Jayapura</option>
						<option value="Manokwari">Manokwari</option>
					</select>
					<label for="eventPlace">Event Place</label>
					<input type="text" name="eventPlace" id="eventPlace" value="" class="required"/>
					<label for="date">Event Date</label>
					<input type="date" name="date" id="date" value="YYYY-MM-DD" class="required"  />
					<fieldset class="ui-grid-a">
                         <button data-theme="b" id="submit" type="submit">Create Event</button>
                    </fieldset>
				</div>
			</form>
			</div>
		</div>
		
		<div data-role="footer" data-position="fixed">
			<h1>RBPL C</h1>
		</div>
	</div>

</body>
</html>